{% extends 'assets/base.html' %}
{% load static %}

{% block title %}搜索模板{% endblock %}

{% block extra_css %}
<style>
.template-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s;
}

.template-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.template-meta {
    font-size: 0.875rem;
    color: #6c757d;
}

.template-actions {
    margin-top: 15px;
}

.search-type-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">搜索模板</h3>
                    <div>
                        <a href="{% url 'assets:advanced_search' %}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 创建新模板
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    {% if page_obj and page_obj.object_list %}
                        <div class="row">
                            {% for template in page_obj %}
                            <div class="col-md-6 col-lg-4">
                                <div class="template-card">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <h5 class="mb-0">{{ template.name }}</h5>
                                        <div>
                                            {% if template.is_public %}
                                                <span class="badge bg-success">公开</span>
                                            {% else %}
                                                <span class="badge bg-secondary">私有</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    {% if template.description %}
                                    <p class="text-muted mb-3">{{ template.description|truncatechars:100 }}</p>
                                    {% endif %}
                                    
                                    <div class="template-meta mb-3">
                                        <div class="mb-1">
                                            <i class="fas fa-search"></i>
                                            <span class="badge search-type-badge bg-info">{{ template.get_search_type_display|default:template.search_type }}</span>
                                        </div>
                                        <div class="mb-1">
                                            <i class="fas fa-user"></i>
                                            创建人: {{ template.user.username }}
                                        </div>
                                        <div class="mb-1">
                                            <i class="fas fa-calendar"></i>
                                            创建时间: {{ template.created_at|date:"Y-m-d H:i" }}
                                        </div>
                                        <div class="mb-1">
                                            <i class="fas fa-chart-line"></i>
                                            使用次数: {{ template.use_count }}
                                        </div>
                                        {% if template.last_used_at %}
                                        <div>
                                            <i class="fas fa-clock"></i>
                                            最后使用: {{ template.last_used_at|date:"Y-m-d H:i" }}
                                        </div>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="template-actions">
                                        <div class="btn-group w-100">
                                            <button type="button" class="btn btn-primary" 
                                                    onclick="useTemplate({{ template.id }})">
                                                <i class="fas fa-play"></i> 使用模板
                                            </button>
                                            <button type="button" class="btn btn-outline-info" 
                                                    onclick="viewTemplate({{ template.id }})">
                                                <i class="fas fa-eye"></i> 查看
                                            </button>
                                            {% if template.user == request.user %}
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="deleteTemplate({{ template.id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- 分页 -->
                        {% if page_obj.has_other_pages %}
                        <nav aria-label="模板分页">
                            <ul class="pagination justify-content-center">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1">首页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                                    </li>
                                {% endif %}

                                <li class="page-item active">
                                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                                </li>

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">末页</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-search fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">暂无搜索模板</h5>
                            <p class="text-muted">创建搜索模板可以快速重复使用复杂的搜索条件</p>
                            <a href="{% url 'assets:advanced_search' %}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 创建搜索模板
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模板详情模态框 -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">搜索模板详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="templateContent">
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="useTemplateBtn">使用模板</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentTemplateId = null;

function useTemplate(templateId) {
    // 跳转到高级搜索页面并加载模板
    window.location.href = `{% url 'assets:advanced_search' %}?template_id=${templateId}`;
}

function viewTemplate(templateId) {
    currentTemplateId = templateId;
    const modal = new bootstrap.Modal(document.getElementById('templateModal'));
    modal.show();
    
    // 这里可以加载模板详情
    document.getElementById('templateContent').innerHTML = `
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            模板详情功能正在开发中...
        </div>
    `;
    
    document.getElementById('useTemplateBtn').onclick = function() {
        useTemplate(templateId);
    };
}

function deleteTemplate(templateId) {
    if (confirm('确定要删除这个搜索模板吗？此操作不可恢复。')) {
        fetch(`/search/templates/${templateId}/delete/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('删除失败: ' + data.message);
            }
        })
        .catch(error => {
            alert('删除失败: ' + error.message);
        });
    }
}
</script>
{% endblock %}